<template>
  <el-dialog
    :title="formData.id?'修改部门':'新增部门'"
    :visible="visible"
    width="50%"
    @close="closeFn"
  >
    <!-- 默认插槽 -->
    <el-form ref="depForm" label-width="120px" :model="formData" :rules="formRules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="formData.manager" style="width:80%" placeholder="请选择" @focus="getEmployeesSimple">
          <el-option v-for="item in employeesList" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formData.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeFn">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// getEmployeesSimple
import { getEmployeesSimple } from '@/api/employees'
import { addDeptment, updateDepartments } from '@/api/department'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    currentNode: {
      type: Object,
      required: true
    },
    origin: {
      type: Array,
      required: true
    }
  },

  data() {
    return {
      formData: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      employeesList: [],
      formRules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '1-50个字符', trigger: 'blur' },
          // 校验部门名称是否重复
          { validator: (rule, value, callback) => {
            // rule是当前校验字段的校验规则 value当前字段输入的值
            let isRepeat = false
            if (this.formData.id) {
              isRepeat = this.origin.filter(item => {
                return item.pid === this.formData.pid && item.id !== this.formData.id
              }).some(item => item.name === value)
            } else {
              isRepeat = this.currentNode.children?.some(
                item => item.name === value
              )
            }
            isRepeat ? callback(new Error('部门名称重复')) : callback()
          }, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '1-50个字符', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            // rule是当前校验字段的校验规则 value当前字段输入的值
            const isRepeat = this.origin.some(
              // 编辑时 在不是自己的情况下，code一样才算重复
              item => item.code === value && item.id !== this.formData.id
              // item.id !== this.formData.id  遍历到自己的时候 为假 整个结果为假
            )
            isRepeat ? callback(new Error('部门编码重复')) : callback()
          }, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门管理者不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '1-300个字符', trigger: 'blur' }
        ]
      }
    }
  },
  // created() {
  //   getEmployeesSimple()
  // },
  methods: {
    closeFn() {
      this.formData = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      }
      this.$refs.depForm.resetFields()
      this.$emit('update:visible', false)
    },
    async getEmployeesSimple() {
      this.employeesList = await getEmployeesSimple()
    },
    submit() {
      this.$refs.depForm.validate(async isok => {
        if (isok) {
          // 有id就是修改
          if (this.formData.id) {
            await updateDepartments(this.formData)
          } else {
            await addDeptment({ ...this.formData, pid: this.currentNode.id })
          }
          this.$emit('deDeps')
          this.closeFn()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  width: 100%;
  display:inline-block;
  text-align: center;
}
</style>
